<template>
	<div class="renting">
		<div class="renting-content-box">
			<div class="top-box">
				<Icon type="ios-arrow-back" style="font-size: 0.45rem" v-on:click="tiaozhuan"></Icon>
				<div class="top-input-box">
					<div class="check-box">
						<select>
							<option>兰州</option>
							<option>兰州</option>
							<option>兰州</option>
							<option>兰州</option>
							<option>兰州</option>
						</select>
					</div>
					<div class="top-shu">|</div>
					<div class="top-serch-box"><input type="text" placeholder="您想住哪?" /></div>
				</div>
				<div class="top-img-box"></div>
			</div>
			<div class="fangyuan-box">
				<div class="fangyuan-cont-box">
					<div class="fangyuan-cont-img"><img src="../../../static/img/renting/hosing.png" /></div>
					<div class="fangyuan-cont-text">全部房源</div>
				</div>
				<div class="fangyuan-cont-box">
					<div class="fangyuan-cont-img"><img src="../../../static/img/renting/dingwei.png" /></div>
					<div class="fangyuan-cont-text">地图找房</div>
				</div>
				<div class="fangyuan-cont-box">
					<div class="fangyuan-cont-img"><img src="../../../static/img/renting/kefu.png" /></div>
					<div class="fangyuan-cont-text">客服</div>
				</div>
			</div>
			<div class="banner-box"><img src="../../../static/img/renting/banner.jpg" /></div>
			<div class="quanbufangyuan-title">全部房源</div>
			<div class="quanbufangyuan-content-box">
				<router-link to="/details/detail">
					<div class="quanbufangyuan-content-img"><img src="../../../static/img/renting/housing1.jpg" /></div>
				</router-link>
				<div class="quanbufangyuan-content-text">
					<div class="quanbufangyuan-content-title">金河丽园3室2厅</div>
					<div class="quanbufangyuan-content-size">
						117m²
						<label>|</label>
						3室2厅1卫
						<label>|</label>
						南
					</div>
					<div class="quanbufangyuan-content-size">安宁科教城</div>
					<div class="quanbufangyuan-content-qita">
						<div>集中供暖</div>
						<div>新上</div>
					</div>
					<div class="quanbufangyuan-content-money">
						3200
						<label>元/月</label>
					</div>
				</div>
			</div>
			<div class="quanbufangyuan-content-box">
				<router-link to="/details/detail">
					<div class="quanbufangyuan-content-img">
						<img
							src=""
						/>
					</div>
				</router-link>
				<div class="quanbufangyuan-content-text">
					<div class="quanbufangyuan-content-title">金河丽园3室2厅</div>
					<div class="quanbufangyuan-content-size">
						117m²
						<label>|</label>
						3室2厅1卫
						<label>|</label>
						南
					</div>
					<div class="quanbufangyuan-content-size">安宁科教城</div>
					<div class="quanbufangyuan-content-qita">
						<div>集中供暖</div>
						<div>新上</div>
					</div>
					<div class="quanbufangyuan-content-money">
						3200
						<label>元/月</label>
					</div>
				</div>
			</div>
			<div class="quanbufangyuan-content-box">
				<router-link to="/details/detail">
					<div class="quanbufangyuan-content-img"><img src="http://img5.imgtn.bdimg.com/it/u=1436181668,2928943327&fm=26&gp=0.jpg" /></div>
				</router-link>
				<div class="quanbufangyuan-content-text">
					<div class="quanbufangyuan-content-title">金河丽园3室2厅</div>
					<div class="quanbufangyuan-content-size">
						117m²
						<label>|</label>
						3室2厅1卫
						<label>|</label>
						南
					</div>
					<div class="quanbufangyuan-content-size">安宁科教城</div>
					<div class="quanbufangyuan-content-qita">
						<div>集中供暖</div>
						<div>新上</div>
					</div>
					<div class="quanbufangyuan-content-money">
						3200
						<label>元/月</label>
					</div>
				</div>
			</div>
			<div class="quanbufangyuan-content-box">
				<router-link to="/details/detail">
					<div class="quanbufangyuan-content-img"><img src="http://img2.imgtn.bdimg.com/it/u=3415669378,1437464114&fm=26&gp=0.jpg" /></div>
				</router-link>
				<div class="quanbufangyuan-content-text">
					<div class="quanbufangyuan-content-title">金河丽园3室2厅</div>
					<div class="quanbufangyuan-content-size">
						117m²
						<label>|</label>
						3室2厅1卫
						<label>|</label>
						南
					</div>
					<div class="quanbufangyuan-content-size">安宁科教城</div>
					<div class="quanbufangyuan-content-qita">
						<div>集中供暖</div>
						<div>新上</div>
					</div>
					<div class="quanbufangyuan-content-money">
						3200
						<label>元/月</label>
					</div>
				</div>
			</div>
			<div class="quanbufangyuan-content-box">
				<router-link to="/details/detail">
					<div class="quanbufangyuan-content-img"><img src="../../../static/img/renting/housing1.jpg" /></div>
				</router-link>
				<div class="quanbufangyuan-content-text">
					<div class="quanbufangyuan-content-title">金河丽园3室2厅</div>
					<div class="quanbufangyuan-content-size">
						117m²
						<label>|</label>
						3室2厅1卫
						<label>|</label>
						南
					</div>
					<div class="quanbufangyuan-content-size">安宁科教城</div>
					<div class="quanbufangyuan-content-qita">
						<div>集中供暖</div>
						<div>新上</div>
					</div>
					<div class="quanbufangyuan-content-money">
						3200
						<label>元/月</label>
					</div>
				</div>
			</div>
			<div class="quanbufangyuan-content-box">
				<router-link to="/details/detail">
					<div class="quanbufangyuan-content-img"><img src="http://img5.imgtn.bdimg.com/it/u=2130479324,2588709823&fm=26&gp=0.jpg" /></div>
				</router-link>
				<div class="quanbufangyuan-content-text">
					<div class="quanbufangyuan-content-title">金河丽园3室2厅</div>
					<div class="quanbufangyuan-content-size">
						117m²
						<label>|</label>
						3室2厅1卫
						<label>|</label>
						南
					</div>
					<div class="quanbufangyuan-content-size">安宁科教城</div>
					<div class="quanbufangyuan-content-qita">
						<div>集中供暖</div>
						<div>新上</div>
					</div>
					<div class="quanbufangyuan-content-money">
						3200
						<label>元/月</label>
					</div>
				</div>
			</div>
			<div class="quanbufangyuan-content-box">
				<router-link to="/details/detail">
					<div class="quanbufangyuan-content-img"><img src="http://img0.imgtn.bdimg.com/it/u=3944681118,4073135278&fm=26&gp=0.jpg" /></div>
				</router-link>
				<div class="quanbufangyuan-content-text">
					<div class="quanbufangyuan-content-title">金河丽园3室2厅</div>
					<div class="quanbufangyuan-content-size">
						117m²
						<label>|</label>
						3室2厅1卫
						<label>|</label>
						南
					</div>
					<div class="quanbufangyuan-content-size">安宁科教城</div>
					<div class="quanbufangyuan-content-qita">
						<div>集中供暖</div>
						<div>新上</div>
					</div>
					<div class="quanbufangyuan-content-money">
						3200
						<label>元/月</label>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'renting',
	methods: {
		tiaozhuan() {
			this.$router.go(-1);
		}
	},
	mounted() {}
};
</script>

<style>

.renting-content-box {
	width: 100%;
	height: auto;
	padding: 0 0.3rem;
	box-sizing: border-box;
}
.top-box {
	width: 100%;
	height: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.top-input-box {
	width: 5rem;
	height: 100%;
	border: 1px solid #dddfe1;
	border-radius: 0.2rem;
	box-shadow: 0px 2px 0px #dcdcdc;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.check-box {
	width: 1rem;
	height: 0.35rem;
	font-size: 0.25rem;
}
.check-box select {
	float: left;
	border: none;
	outline: none;
}
.top-serch-box {
	width: 3rem;
	height: 0.35rem;
}
.top-serch-box input {
	width: 100%;
	height: 0.35rem;
	border: none;
	background: url(../../../static/img/renting/serch.png) no-repeat center left;
	background-size: 0.35rem 0.35rem;
	padding-left: 0.4rem;
	outline: none;
}
.top-img-box {
	width: 0.6rem;
	height: 0.6rem;
	background: url(../../../static/img/renting/xinxi.png) no-repeat center;
	background-size: 0.6rem 0.6rem;
}
.fangyuan-box {
	width: 100%;
	height: 2.05rem;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #dedede;
}
.fangyuan-cont-box {
	width: 1.2rem;
	height: 1.15rem;
	text-align: center;
	position: relative;
	margin-left: 0.15rem;
	margin-right: 0.6rem;
}
.fangyuan-cont-img {
	width: 0.6rem;
	height: 0.6rem;
	position: absolute;
	top: 0.05rem;
	left: 50%;
	transform: translate(-50%, 0);
}
.fangyuan-cont-img img {
	width: 100%;
	height: 100%;
}
.fangyuan-cont-text {
	font-size: 0.23rem;
	width: 100%;
	height: 0.25rem;
	line-height: 0.25rem;
	position: absolute;
	bottom: 0;
}
.banner-box {
	width: 100%;
	height: 3.4rem;
	border-radius: 0.15rem;
	overflow: hidden;
	margin-top: 0.4rem;
}
.banner-box img {
	width: 100%;
	height: 100%;
}
.quanbufangyuan-title {
	width: 100%;
	height: 0.5rem;
	font-size: 0.42rem;
	line-height: 0.5rem;
	font-weight: bolder;
	margin-top: 0.9rem;
}

.quanbufangyuan-content-box {
	width: 100%;
	height: 2.7rem;
	padding: 0.3rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.quanbufangyuan-content-img {
	width: 2.6rem;
	height: 2.15rem;
	border-radius: 0.15rem;
	overflow: hidden;
}
.quanbufangyuan-content-img img {
	width: 100%;
	height: 100%;
}
.quanbufangyuan-content-text {
	width: 3.1rem;
	height: 2.15rem;
	margin-left: 0.25rem;
}
.quanbufangyuan-content-title {
	width: 100%;
	height: 0.35rem;
	font-size: 0.3rem;
	line-height: 0.35rem;
}
.quanbufangyuan-content-size {
	width: 100%;
	height: 0.25rem;
	font-size: 0.2rem;
	line-height: 0.25rem;
	margin-top: 0.15rem;
}
.quanbufangyuan-content-qita {
	width: 100%;
	height: 0.35rem;
	font-size: 0.2rem;
	line-height: 0.35rem;
	margin-top: 0.15rem;
	display: flex;
}
.quanbufangyuan-content-qita div {
	width: auto;
	height: 0.35rem;
	background: #ecf0f3;
	padding: 0 0.08rem;
	box-sizing: border-box;
	color: #adb9c5;
	margin-right: 0.12rem;
}
.quanbufangyuan-content-money {
	width: 100%;
	height: 0.4rem;
	font-size: 0.32rem;
	color: #fb5650;
	margin-top: 0.17rem;
}
.quanbufangyuan-content-money label {
	font-size: 0.21rem;
}
</style>
